<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="icon" th:href="@{/img/logo.ico}" href="../static/img/logo.ico" type="images/x-ico"/>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}">
    <title>成绩录入</title>
    <link rel="stylesheet" th:href="@{/fontawesome/css/font-awesome.min.css}"
          href="../../static/fontawesome/css/font-awesome.min.css">

    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,500;0,600;0,700;1,400&display=swap">

    <!-- Fontawesome CSS -->
    <link rel="stylesheet" href="../static/fontawesome/css/fontawesome.min.css"
          th:href="@{/fontawesome/css/fontawesome.min.css}">
    <link rel="stylesheet" href="../static/fontawesome/css/all.min.css" th:href="@{/fontawesome/css/all.min.css}">

    <!-- Main CSS -->
    <link rel="stylesheet" href="../static/css/back_index.css" th:href="@{/css/back_index.css}">
    <style type="text/css">
        th, td {
            white-space: nowrap;
            overflow: hidden;
            word-break: keep-all;
        }
    </style>
</head>
<body>
<div class="main-wrapper">
    <div th:replace="commons/bar::#teachermenubar(activeUri1='成绩录入')"></div>
    <div class="page-wrapper">
        <div class="content container-fluid">
            <div class="container">
                    <span class="mb-2 text-muted" style="font-size: smaller">
                        如下为所有选报此课程的学生，您需要将其<strong>平时成绩</strong>和<strong>期末成绩</strong>输入，系统会自动算出其总成绩，并<strong>自动保存</strong>。
                    </span>
                <div class="table-responsive">
                    <table class="table table-bordered table-hover" id="datas">
                        <thead>
                        <th>学号</th>
                        <th>姓名</th>
                        <th>平时成绩</th>
                        <th>期末成绩</th>
                        <th>总成绩</th>
                        </thead>
                        <tbody>
                        <tr id="template">
                            <td class="studentId"></td>
                            <td class="studentName"></td>
                            <td class="score1"></td>
                            <td class="score2"></td>
                            <td class="sum"></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <footer>
                <p>2020 &copy; 软件学院学生信息管理系统 by 郑焙元</p>
            </footer>
        </div>
    </div>
</div>
<script src="../static/js/jquery-3.5.1.min.js" th:src="@{/js/jquery-3.5.1.min.js}"></script>
<script>
    $(function () {
        sendAjax("/teacher/api/" + [[${session.LoginUser}]], "get", {}, function (res) {
            $.each(res.data, function (i, student) {
                var row = $("#template").clone();
                row.find(".studentId").text(student.studentid);
                row.find(".studentId").attr("id", "id" + i);
                row.find(".studentName").text(student.studentname);
                sendAjax("/teacher/api/score/" + student.studentid, "get", {
                    teacherid: [[${session.LoginUser}]],
                }, function (res) {
                    var html1 = '<input type="number" name="score1" id=\'score1_' + i + '\' value=\'' + res.data.score1 + '\' max="40" min="0" step="0.01" onchange="updateScore(' + i + ')">';
                    row.find(".score1").html(html1);
                    var html2 = '<input type="number" name="score2" id=\'score2_' + i + '\' value=\'' + res.data.score2 + '\' max="60" min="0" step="0.01" onchange="updateScore(' + i + ')">';
                    row.find(".score2").html(html2);
                    row.find(".sum").text(new Number(res.data.score1 + res.data.score2).toFixed(2));
                    row.find(".sum").attr("id", "sum" + i);
                }, "");
                row.appendTo("#datas");
            });
            $("#template:first").remove();
        }, "")
    });

    function updateScore(i) {
        var id = "#id" + i;
        var score1 = "#score1_" + i;
        var score2 = "#score2_" + i;
        var sum = "#sum" + i;
        if ($(score1).val() > 40) {
            $(score1).val(40);
            alert("平时成绩最高为40，已为您校正");
        } else if ($(score1).val() < 0) {
            $(score1).val(0);
            alert("平时成绩最低为0，已为您校正");
        }
        if ($(score2).val() > 60) {
            $(score2).val(60);
            alert("期末成绩最高为60，已为您校正");
        } else if ($(score2).val() < 0) {
            $(score2).val(0);
            alert("期末成绩最低为0，已为您校正");
        }
        $(sum).text(new Number(Number($(score1).val()) + Number($(score2).val())).toFixed(2));
        sendAjax("/teacher/api/score", "put", {
            teacherid: [[${session.LoginUser}]],
            selectcoursestudentid: $(id).text(),
            score1: $(score1).val(),
            score2: $(score2).val(),
        }, function (res) {

        }, "");
    }
</script>
<script src="../static/js/popper.min.js" th:src="@{/js/popper.min.js}"></script>
<script src="../static/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>
<script src="../static/js/jquery.slimscroll.min.js" th:src="@{/js/jquery.slimscroll.min.js}"></script>
<script src="../static/js/script.js" th:src="@{/js/script.js}"></script>

</body>
</html>
